﻿@model VMC.Domain.Model.DataStructure.ComplexDataTypeManagement

@{
    ViewBag.Title = "Complex Data Type Management";

    if (Model.ColumnManagement != null)
    {
        <div class="one text-center last" >
        <a class="actionbutton action-button with-text one" href='javascript:ShowList("DataTypesList")' title="Toggle Data Type List"><span class="action-icon action-icon-list"></span>Data Type List</a>
        </div>
    
        if (Model.Items != null)
        {
                <div class="one last hide" id="DataTypesList" >
                    <div class="one-half" >
                        @Html.Partial("~/Views/DataTypes/_DataTypesList.cshtml", @Model)      
                    </div>
                    <div class="text-center last" >
                        <a class="actionbutton action-button with-text one" href='javascript:ShowList("DataTypesList")' title="Toggle Data Type List"><span class="action-icon action-icon-list"></span>Data Type List</a>
                    </div>
                </div>
        }
            <div class="one-half">
                
                <ol id="ComplexDataTypeColumnsList" class="Sortable">
                @if (Model.ColumnManagement.Items != null)
                {
                    foreach (VMC.Domain.Model.DataStructure.AddEditComplexDataTypeColumn item in Model.ColumnManagement.Items.List.OrderBy(c=>c.ColumnOrder))
                    {
                        <li basic-datatype-id="@item.BasicDataTypeID" class="existing drag" savedindex="@item.ColumnOrder"  data-item-id="@item.ID"><span class="action-icon action-icon-move"></span>[@item.BasicDataTypeSystemName] @item.Name  (@item.VariableName)
                        <span class="action-buttons right"> @VMCHelper.ActionIconButton(Url,item.ID,"UpdateColumn","Update Column","action-icon-edit") @VMCHelper.ActionIconDeleteButton(Url, item.ID, "DeleteColumn", "Delete " +item.Name, "action-icon-delete", "Delete " + @item.Name, "Are you sure you want to delete " + @item.Name + " data type ?")</span>
                        </li>    
                    }
                }
                </ol> 
                <p>
                @using (Html.BeginForm("UpdateColumnOrder" + "/" + Url.RequestContext.RouteData.Values["id"], "DataTypes", FormMethod.Post, new { id = "changeorderform" }))
                {
                    <input type="hidden" name="changedorder" id="changedorder" value=""/>
                    <input type="submit" class="right" icon-class="action-icon-save" value="Save Changes" />
                }
                
                @*<a class="actionbutton action-button with-text right" href='SaveNewOrder' title="Save Changes"><span class="action-icon action-icon-save"></span>Save Changes</a>*@
                </p>

                <br />
                Legends
                <ul class="Sortable">
                    <li class="existing">Saved column</li>
                    <li class="existing changed">Unsaved updated column</li>
                    <li class="changed">Unsaved new column</li>
                </ul>

            </div>
            <div class="one-half">
                @Html.Partial("~/Views/DataTypes/_BasicDataTypeList.cshtml", @Model.ColumnManagement.BasicDataType)
            </div>
        
            <div id="AddEditColumn" class="hide" title="Add/Edit Complex Data Type Column">
                @Html.Partial("~/Views/DataTypes/_AddEditComplexDataTypeColumn.cshtml", @Model.ColumnManagement.AddEditModel)
            </div>
    
            if(Model.ColumnManagement.AddEditModel != null && Model.ColumnManagement.AddEditModel.ID >0)
            {
                //This means open the dialog box
            }
    }
    else if (Model.Items != null)
    {
        <div class="one-half">
        @Html.Partial("~/Views/DataTypes/_DataTypesList.cshtml", @Model)      
        </div>
        }   
    
    }

@section scripts{

<script type="text/javascript">

    function AddBasicColumn(Response) {
        //If column created successfully then unbind previous event handler and close dialog box.
        //jQuery("#VariableName").attr("value", Response);
        jQuery("#AddEditColumn").unbind('dialogclose');
        jQuery("#AddEditColumn").dialog('close');
        
        //alert(Response);
    }



    jQuery.noConflict()(function ($) {
        $(document).ready(function () {


            if (jQuery("#AutoGenerateVaribleName").is(":checked")) {
                jQuery("#VariableName").attr("readonly", true);
            }

            jQuery("#AutoGenerateVaribleName").change(function () {

                if (jQuery("#AutoGenerateVaribleName").is(":checked")) {
                    jQuery("#VariableName").attr("readonly", true);
                    GenerateVariableName();
                }
                else {
                    jQuery("#VariableName").removeAttr("readonly");
                }
            });

            jQuery("#Name").change(function () {
                if (jQuery("#AutoGenerateVaribleName").is(":checked")) {
                    GenerateVariableName();
                }
            });


            jQuery("#Name").keypress(function () {
                if (jQuery("#AutoGenerateVaribleName").is(":checked")) {
                    GenerateVariableName();
                }
            });

            function GenerateVariableName() {
                var Name = jQuery("#Name").val();
                var VarNameArr = Name.split(" ");
                var i = 0;
                var VarName = "";
                for (i = 0; i < VarNameArr.length; i++) {
                    VarNameArr[i] = VarNameArr[i].replace(/[^a-zA-Z_]/, "");
                    VarNameArr[i] = VarNameArr[i].replace("-", "");
                    VarName += VarNameArr[i].charAt(0).toUpperCase() + VarNameArr[i].slice(1);
                }
                jQuery("#VariableName").attr("value", VarName);
            }

            jQuery("#AddEditColumn").dialog({
                resizable: false,
                width: 400,
                modal: true,
                autoOpen: false
            });


            jQuery("#ComplexDataTypeColumnsList").sortable({
                placeholder: "placeholder",
                revert: "invalid",
                update: function (event, ui) {

                    var i = 1;
                    jQuery(this).find("li").each(function () {
                        if (jQuery(this).attr("savedindex")) {
                            if (jQuery(this).attr("savedindex") == i.toString()) {
                                jQuery(this).removeAttr("movedindex");
                                jQuery(this).removeClass("changed");
                            }
                            else {
                                jQuery(this).attr("movedindex", i);
                                jQuery(this).addClass("changed");
                            }
                        };
                        if (jQuery(this).attr("inserted")) {
                            jQuery(this).attr("inserted", i);
                        };
                        i++;
                    });

                },
                receive: function (event, ui) {
                    //ui.item <== This is a jQuery Object for the manuplation
                    //ui.item.attr("basic-datatype-id") <== This is the ID for the Basic data type
                    var i = 1;
                    var found = false;
                    var col_order = 0;
                    var bas_id = 0;
                    jQuery(this).find("li").each(function () {
                        if (!jQuery(this).attr("inserted") && !jQuery(this).attr("savedindex")) {
                            if (jQuery(this).text() == ui.item.text()) {
                                found = true;
                                jQuery(this).find("span").replaceWith(""); //.removeClass("action-icon action-icon-move");
                                jQuery(this).attr("inserted", i);
                                col_order = i;
                                bas_id = parseInt(jQuery(this).attr("basic-datatype-id"));
                            }
                        }
                        i++;
                    });
                    jQuery("#AddEditColumn").find("#ColumnOrder").val(col_order);
                    jQuery("#AddEditColumn").find("#BasicDataTypeID").val(bas_id);
                    jQuery("#AddEditColumn").dialog('open');
                    jQuery("#AddEditColumn").unbind('dialogclose');
                    jQuery("#AddEditColumn").bind('dialogclose', function () {
                        jQuery("#ComplexDataTypeColumnsList li:nth-child(" + col_order.toString() + ")").replaceWith("");
                        //location.reload(true); //Change this to something better.
                    });
                }
            });

            jQuery("#BasicTypeList li").draggable({
                connectToSortable: "#ComplexDataTypeColumnsList",
                helper: "clone",
                revert: "invalid"
            });


            jQuery("#changeorderform").submit(function () {
                //alert("Hello There");

                var operations = "";
                jQuery("#ComplexDataTypeColumnsList").find("li").each(function () {
                    if (jQuery(this).attr("movedindex")) {
                        operations += jQuery(this).attr("data-item-id") + "-" + jQuery(this).attr("movedindex") + "|"
                    };
                });


                jQuery("#changedorder").val(operations);

                //alert(jQuery("#changedorder").val());
            });


            if (jQuery("#ColumnID").val() != "0") {
                jQuery("#AddEditColumn").dialog('open');
                jQuery("#AddEditColumn").unbind('dialogclose');
                jQuery("#AddEditColumn").bind('dialogclose', function () {
                    window.location.replace('http://localhost:49215/DataTypes/Columns/' + jQuery("#ComplexDataTypeID").val());
                    //Reset the form for editing 
                    //jQuery("#AddBasicColumnForm").each(function () { this.reset(); });
                });
            }
        });
    });

    
</script>

}

